<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/state/modules/user'
import Iconify from '@/components/Iconify/index.vue'
import { useAuthStore } from '@/state/modules/auth'
import { useRouter } from '@/hooks/router'
import { Toast } from '@/utils/uniapi/prompt'

const userStore = useUserStore()
const userInfo = ref<ApiModels.base.ApplicationUserInfo>()

const authStore = useAuthStore()
const router = useRouter()
async function logout() {
  await authStore.loginOut()
  Toast('注销成功', { icon: 'success' })
  setTimeout(() => router.back(), 1000)
}

onLoad((e: any) => {
  console.log(e)
  userStore.initUserInfo()
  userInfo.value = userStore.userInfo
})
</script>

<template>
  <tm-app>
    <!-- 这里放置你的内容 -->
    <tm-sheet :margin="[0]" :padding="[24, 0]" :round="0">
      <tm-cell show-avatar :round="3" :margin="[0]" :padding="[0, 16]" title="用户资料" url="./edit" bottom-border>
        <template #avatar>
          <iconify icon="i-mdi-account" />
        </template>
        <template #rightText>
          <tm-image :src=" userInfo?.avatarUrl || '/static/svg/favicon.svg'" :height="24" :width="24" unit="px" class="uno-mr-15px" />
        </template>
      </tm-cell>
      <tm-cell show-avatar :round="3" :margin="[0]" :padding="[0, 16]" title="修改密码" url="./changePassword" bottom-border>
        <template #avatar>
          <iconify icon="i-mdi-key" />
        </template>
      </tm-cell>
    </tm-sheet>

    <tm-sheet transprent :padding="[0]" _class="uno-justify-center uno-items-center">
      <tm-button color="grey-1" label="注销登录" icon="tmicon-account" size="small" :width="200" :margin="[0]" :padding="[15]" @click="logout" />
    </tm-sheet>
  </tm-app>
</template>

<style lang="scss" scoped></style>
